<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

<h:head>
    <title>
        <ui:insert name="title">cassandraview</ui:insert>
    </title>
    <h:outputStylesheet library="css" name="style.css"/>
    <meta http-equiv="content-type" content="text/xhtml; charset=UTF-8"/>
</h:head>


<h:body>
    <div class="container">
        <div class="header">
            <h:link outcome="index">
            	<h:graphicImage library="images" name="logo.png" alt="Put logo here."/>
            </h:link>
            <h:link id="cinfo" outcome="index" styleClass="fltrt larger">
            	Connection: #{userSession.currentKeyspace} on #{userSession.host}
            </h:link>
        <!-- end .header -->
        </div>
        <h:form id="main-form">
        <div class="sidebar1">
        	<rich:panel>
	            <f:facet name="header">
	                <h:outputText value="Keyspace"></h:outputText>
	            </f:facet>
		        <h:selectOneMenu styleClass="rf-sel-inp" style="width: 100%;" id="keyspace-select" value="#{userSession.currentKeyspace}" >
	                <f:selectItems value="#{userSession.availableKeyspaces}" />
	            </h:selectOneMenu>
	            <rich:jQuery selector="#keyspace-select" event="change" query="jQuery('#main-form').submit();"></rich:jQuery>
	        </rich:panel>
            <ul class="nav">
           		<rich:panelMenu groupExpandedLeftIcon="triangleUp"
               					groupCollapsedLeftIcon="triangleDown"
               					topGroupExpandedRightIcon="chevronUp"
               				    topGroupCollapsedRightIcon="chevronDown"
               				    itemLeftIcon="disc"
								itemChangeListener="#{userSession.columnFamilySelected}">
           			<rich:panelMenuGroup label="ColumnFamily" expanded="true" id="menu">
						<c:forEach items="#{userSession.columnFamilies}" var="navItem">
           					<rich:panelMenuItem label="#{navItem.label}" name="#{navItem.name}"/>
           				</c:forEach>         				
           			</rich:panelMenuGroup>
           		</rich:panelMenu>   
            </ul>
        <!-- end .sidebar1 -->
        </div>
       	<div class="content">
       		<div class="whitelink">
	        	<rich:toolbar id="bar" height="30" itemSeparator="line" style="margin-bottom: 10px;">
	        		<rich:toolbarGroup itemSeparator="line">
	        			<h:link outcome="index" value="Connection" />
	                	<h:link outcome="details" value="Details" />
	                	<h:link outcome="query" value="Query" />
	            	</rich:toolbarGroup>
	            	<rich:toolbarGroup itemSeparator="line" location="right">
	                	<h:link outcome="settings" value="Settings"/>
	            	</rich:toolbarGroup>
	        	</rich:toolbar>
	        </div>
        	<ui:insert name="body"></ui:insert>
        	<div class="clr"></div>
        	<!-- end .content -->
       	</div>
        </h:form>
        <div class="footer">
            <p></p>
        <!-- end .footer -->
        </div>
    </div>
</h:body>
</html>
